<template >
  <div class="index-market">
    <div class="hd">
      <p :class="{ 'active': activeIndex === 1 }" @click="() => { activeIndex = 1; startScroll(); }">
        Output details
      </p>
      <p :class="{ 'active': activeIndex === 2 }" @click="() => { activeIndex = 2; currentIndex = 0; clearScroll(); }">
        Markets
      </p>
    </div>
    <div class="bd">
      <div class="head">
        <p>Address</p>
        <p>Quantity</p>
      </div>
      <div class="swiper-wrapper">
        <!-- detail -->
        <div class="detail-box" v-if="activeIndex === 1">
          <div class="scroll-box">
            <div class="swiper-slide-frame" :style="{ 'transform': `translateY(-${currentIndex * 100}%)` }">
              <template v-for="(v, i) in detailArr">
                <div class="item" :key="i" :style="{ 'transform': `translateY(${(i) * 100}%)` }" ref="items">
                  <p class="account">{{ v.account }}</p>
                  <p class="price">{{ v.price }}</p>
                </div>
              </template>
            </div>
          </div>
        </div>
        <!-- market -->
        <div class="market-box" v-if="activeIndex === 2">
          <template v-for="(v, i) in marketArr">
            <div class="item" :key="i">
              <div class="item-l">
                <img :src="v.icon" alt="图片加载失败">
                <div class="txt">
                  <div class="name">{{ v.name }}</div>
                  <div class="desc">{{ v.desc }}</div>
                </div>
              </div>
              <div class="item-r">
                <p class="price">${{ v.price }}</p>
                <div class="percent" :class="{ 'decrease': /-/g.test(v.percent) }">{{ v.percent }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: 1,
      marketArr: [
        {
          icon: "/BTC.png",
          name: "BTC",
          desc: "bitcoin",
          price: "24466.21",
          percent: "-0.96%"
        },
        {
          icon: "/ETH.png",
          name: "ETH",
          desc: "ethereum",
          price: "1687.13",
          percent: "-0.96%"
        },
        {
          icon: "/USDT.png",
          name: "USDT",
          desc: "tether",
          price: "0.999955",
          percent: "0.03%"
        },
        {
          icon: "/TRX2.png",
          name: "TRX",
          desc: "tron",
          price: "0.072674",
          percent: "3.61%"
        },
      ],
      detailArr: [
        {
          account: "0xc5a4.....one",
          price: "0.450898	ETH"
        },
        {
          account: "0xc5a4.....two",
          price: "0.4508	ETH"
        },
        {
          account: "0xc5a4.....b0cae816e4f3",
          price: "0.45898	ETH"
        },
        {
          account: "0xc5a4.....b0cae816e4f3",
          price: "0.45098	ETH"
        },
        {
          account: "0xc5a4.....b0cae816e4f3",
          price: "0.452398	ETH"
        },
        {
          account: "0xc5a4.....b0cae816e4f3",
          price: "0.4834398	ETH"
        },
        {
          account: "0xc5a4.....b0cae816e4f3",
          price: "0.41230898	ETH"
        },
        {
          account: "0xc5a4.....b0cae816e4f3",
          price: "0.450898	ETH"
        },
        {
          account: "0xc5a4.....b0cae816e4f3",
          price: "0.45083498	ETH"
        },
        {
          account: "0xc5a4.....a",
          price: "0.4834398	ETH"
        },
        {
          account: "0xc5a4.....b",
          price: "0.41230898	ETH"
        },
        {
          account: "0xc5a4.....c",
          price: "0.450898	ETH"
        },
        {
          account: "0xc5a4.....d",
          price: "0.45083498	ETH"
        }
      ],
      scroll: false,   // 是否可以滚动
      len: 0,         // 数组长度
      currentIndex: 0,  // 首条索引
      timer: null   // 定时器
    }
  },
  methods: {
    startScroll () {
      // 没有超过八个子项不滑动
      if (!this.scroll) {
        return
      }
      this.timer = setInterval(() => {
        // 修改飘动得位置
        this.currentIndex++
        let cur = this.currentIndex
        let len = this.len
        let active = (cur - 1) % len
        // 给予过渡时间
        setTimeout(() => {
          if (this.$refs.items[active]) {
            this.$refs.items[active].style.transform = `translateY(${(len + cur - 1) * 100}%)`
          }
        }, 350);
      }, 900)
    },
    clearScroll () {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    // 监听页面显示和隐藏，
    listenPage () {
      // 可能需要兼容苹果端：Safari不会按预期触发visibilitychange
      document.addEventListener('visibilitychange', () => {
        // hidden & visible
        if (document.visibilityState === 'hidden') {
          // 页面隐藏时清除定时器
          this.clearScroll()
        } else if (document.visibilityState === 'visible') {
          // 页面恢复启动定时器
          this.startScroll()
        }
      })
    },
  },
  mounted () {
    this.len = this.detailArr.length
    this.scroll = Boolean(this.len > 8)
    this.startScroll()
    this.listenPage()
  },
  destroyed () {
    this.clearScroll()
  }
}
</script>

<style lang="scss" scoped>
.index-market {
  width: rem(345);
  background: #fff;
  border: 0rem (5) solid #f4f4f5;
  box-shadow: rem(2) rem(2) rem(8) rgb(190 178 213 / 50%);
  border-radius: rem(8);
  margin: 0 auto;
  margin-top: rem(15);

  .hd {
    @include between;
    padding: 0 rem(54);
    border-bottom: rem(1) solid #f5f5f5;

    p {
      @include center;
      position: relative;
      font-weight: 600;
      font-size: rem(16);
      color: #999;
      height: rem(49);
    }

    .active {
      color: #171717;
      font-weight: 600;
    }

    .active::after {
      content: "";
      width: rem(24);
      height: rem(3);
      background: #0052ff;
      border-radius: rem(2);
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 0;
    }
  }

  .bd {
    @include vC;
    flex-direction: column;
    width: 100%;
    padding: 0 rem(12);
    padding-bottom: rem(12);

    .head {
      width: 100%;
      @include between;
      height: rem(30);

      p {
        color: #999;
        font-size: rem(14);
      }
    }

    .swiper-wrapper {
      width: 100%;

      .detail-box {
        width: 100%;
        height: rem(200);
        margin-top: rem(15);
        position: relative;
        overflow: hidden;

        .scroll-box {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 8;
          top: 8;
          right: 8;
          bottom: 8;

          .swiper-slide-frame {
            width: 100%;
            height: 12.5%;
            position: absolute;
            left: 0;
            top: 0;
            will-change: transform;
            transition: transform 350ms linear;

            .item {
              @include between;
              width: 100%;
              height: 100%;
              height: rem(25);
              position: absolute;
              cursor: grap;
              overflow: hidden;

              .account {
                font-size: rem(10);
                font-weight: bold;
                color: rgb(0, 82, 255);
                line-height: rem(14);
              }

              .price {
                color: #333;
                font-size: rem(12);
                font-weight: bold;
              }
            }
          }
        }
      }

      .market-box {
        width: 100%;
        margin-top: rem(15);

        .item {
          height: rem(48);
          @include between;

          .item-l {
            display: flex;
            align-items: center;
            padding-left: rem(12);

            img {
              width: rem(24);
              height: rem(24);
              background: #f0f0f0;
              border-radius: 50%;
            }

            .txt {
              margin-left: rem(6);

              .name {
                font-size: rem(14);
                font-weight: 600;
                line-height: rem(13);
              }

              .desc {
                font-size: rem(12);
                color: #999;
                line-height: rem(12);
                margin-top: rem(1);
              }
            }
          }

          .item-r {
            display: flex;
            align-items: center;
            margin-right: rem(12);

            .price {
              font-weight: 700;
              color: #333;
              font-size: rem(12);
            }

            .percent {
              font-size: rem(14);
              font-weight: 700;
              width: rem(87);
              text-align: right;
              color: #44a946;
            }

            .decrease {
              color: red;
            }
          }
        }
      }
    }
  }
}
</style>
